<!--
 * @Author: Bennent_G
 * @Date: 2024-12-23 16:14:13
 * @LastEditTime: 2025-03-27 10:10:18
 * @Description:
-->
<template>
	<el-aside :width="collapsed ? '64px' : '280px'">
		<el-button class="float-btn" :style="{ left: collapsed ? '50px' : '266px' }" :icon="collapsed ? Expand : Fold"
			circle @click="collapsed = !collapsed" />
		<el-menu :default-active="selectedKeys" :collapse="collapsed" @select="onSelect">
			<!-- 一级 -->
			<template v-for="menu in $props.menu">
				<el-sub-menu v-if="menu.children && menu.children.length > 0" :key="menu.id" :index="JSON.stringify(menu)">
					<template #title>
						<el-icon>
							<component :is="menu.icon" />
						</el-icon>
						<span>{{ menu.label || menu.title }}</span>
					</template>
					<!-- 二级  -->
					<template v-for="subMenu in menu.children">
						<el-sub-menu v-if="subMenu.children && subMenu.children.length > 0" :key="subMenu.id" :index="subMenu.path">
							<template #title>
								<el-icon>
									<component :is="subMenu.icon" />
								</el-icon>
								<span>{{ subMenu.label || subMenu.title }}</span>
							</template>
							<!-- 三级 -->
							<el-menu-item v-for="subsubMenu in subMenu.children" :key="subsubMenu.id"
								:index="subsubMenu.path">
								<el-icon>
									<component :is="subsubMenu.icon" />
								</el-icon>
								<span>{{ subsubMenu.label || subsubMenu.title }}</span>
							</el-menu-item>
						</el-sub-menu>
						<el-menu-item v-else :key="subMenu.id" :index="subMenu.path">
							<el-icon>
								<component :is="subMenu.icon" />
							</el-icon>
							<span>{{ subMenu.label || subMenu.title }}</span>
						</el-menu-item>
					</template>
				</el-sub-menu>
				<el-menu-item v-else :key="menu.id" :index="menu.path">
					<el-icon>
						<component :is="menu.icon" />
					</el-icon>
					<span>{{ menu.label || menu.title }}</span>
				</el-menu-item>
			</template>
		</el-menu>
	</el-aside>
</template>

<script setup lang="ts">
import { ref, computed, defineComponent, watch, PropType } from 'vue';
import { useRouter } from 'vue-router';
import { Expand, Fold } from '@element-plus/icons-vue';
import { useMenuStore, useAuthStore } from '@/stores';
import { storeToRefs } from 'pinia';
import useRouteHook from '@/hooks/admin/useRouteHook';

defineComponent({
	name: 'BaseLayoutSidier',
});

interface MenuItem {
	id: string;
	key: string;
	parentId: string;
	name: string;
	title: string;
	label: string;
	path: string;
	children?: MenuItem[];
	icon?: any;
}
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	menu: {
		type: Array as PropType<MenuItem[]>,
		default: () => [],
	},
});
const collapsed = computed({
	get: () => props.modelValue,
	set: (value) => emit('update:modelValue', value),
});

const { currentRoute } = useRouteHook();

// 菜单切换
const menuStore = useMenuStore();
const { addMenuTabCache } = menuStore;
const selectedKeys = ref<string>('0');
watch(
	() => currentRoute.value.path,
	(newValue) => {
		selectedKeys.value = newValue;
	},
	{ immediate: true }
);

const router = useRouter();
const { flatAuthRoutes } = storeToRefs(useAuthStore());
const onSelect = (path: string) => {
	const item = flatAuthRoutes.value.find((route) => route.path === path);
	addMenuTabCache({
		id: item?.id,
		label: item?.title,
		title: item?.title,
		name: item?.name,
		path: item?.path,
		icon: item?.icon || null,
		parentId: item?.parentId,
	});
	selectedKeys.value = item?.id || '';
	router.push(item?.path || '/admin/welcome');
};
</script>

<style scoped lang="scss">
.el-aside {
	position: relative;
	transition: width 0.3s;
	border-top: 1px solid var(--el-border-color-light);
	border-right: 1px solid var(--el-border-color-light);

	.float-btn {
		position: fixed;
		top: 80px;
		width: 28px;
		height: 28px;
		z-index: 1000;
	}

	:deep(.el-menu) {
		border-right: none;
		height: 100%;
		--el-menu-item-height: 40px;
		--el-menu-sub-item-height: 40px;
		.el-menu-item.is-active {
			background-color: var(--el-color-primary-light-9);
		}
	}
}

.el-menu--collapse {
	width: 64px;
}
</style>
